<!-- eslint-disable vue/valid-v-slot -->
<!-- eslint-disable vue/no-lone-template -->
<template>
  <div class="main-container">
    <a-tabs type="line" v-model:active-key="key" @change="changeFn" auto-switch>
      <a-tab-pane title="系统设置" key="1">
        <div class="box">
          <a-row class="grid-demo" justify="center">
            <a-col :span="10">
              <a-form
                ref="backStageForm"
                :model="backStage"
                :labelCol="{ span: 8 }"
                @submit="submit"
              >
                <a-form-item
                  label="后台名称"
                  field="name"
                  :rules="[{ required: true, message: '请输入后台名称' }]"
                  :validate-trigger="['change']"
                  asterisk-position="end"
                >
                  <a-input v-model.trim="backStage.name" placeholder="请输入后台名称" />
                  <template #extra>
                    <div>系统名称为后台左上角名称</div>
                  </template>
                </a-form-item>
                <a-form-item label="手机号码" field="phone">
                  <a-input v-model.trim="backStage.phone" placeholder="请输入手机号" />
                  <template #extra>
                    <div>手机号码主要用于，系统某些地方异常时，通知用的</div>
                  </template></a-form-item
                >
                <a-form-item label="邮箱号码" field="email">
                  <a-input v-model.trim="backStage.email" placeholder="请输入邮箱" />
                  <template #extra>
                    <div>邮箱号码主要用于，系统某些地方异常时，通知用的</div>
                  </template>
                </a-form-item>
                <a-form-item label="网站备案号" field="icp">
                  <a-input v-model.trim="backStage.icp" placeholder="请输入网站备案号" />
                  <template #extra>
                    <div>域名的ICP备案号</div>
                  </template>
                </a-form-item>
                <a-form-item label="公安备案号" field="publicSecurity">
                  <a-input v-model.trim="backStage.publicSecurity" placeholder="请输入公安备案号" />
                  <template #extra>
                    <div>域名的公安备案号</div>
                  </template>
                </a-form-item>
                <a-form-item
                  label="登录冻结"
                  field="passWordError"
                  :rules="[{ required: true, message: '请输入登录失败次数' }]"
                  :validate-trigger="['change']"
                  asterisk-position="end"
                >
                  <a-input-number
                    hide-button
                    v-model="backStage.passWordError"
                    placeholder="请输入登录失败次数"
                  />
                  <template #extra>
                    <div>客户登录失败达到一定次数后，账号会被冻结掉</div>
                  </template>
                </a-form-item>
                <a-form-item label="后台金额" field="balance">
                  <a-input hide-button v-model="backStage.balance" placeholder="请输入后台金额" />
                </a-form-item>
                <!-- <a-form-item
                  label="失败后果"
                  field="name"
                  :rules="[{ required: true, message: '请选择失败后果' }]"
                  :validate-trigger="['change']"
                >
                  <a-select
                    placeholder="请选择轮询条件"
                    v-model="info.info.pollingCondition"
                    allow-clear
                  >
                    <a-option :value="0">已充值卡</a-option>
                    <a-option :value="2">已充值卡+已实名卡</a-option>
                    <a-option :value="3">已充值卡+已实名卡+已激活卡</a-option>
                  </a-select>
                </a-form-item> -->
                <a-form-item label="快速备份">
                  <a-radio-group class="radio-bcg" v-model="backup" @change="changeBackup">
                    <a-radio :value="true">
                      <template #radio="{ checked }">
                        <div
                          style="display: flex"
                          :class="{ 'custom-radio-card-checked': checked }"
                        >
                          <div className="custom-radio-card-mask">
                            <div className="custom-radio-card-mask-dot"></div> </div
                          ><div className="custom-radio-card-title">开启</div>
                        </div>
                      </template>
                    </a-radio>
                    <a-radio :value="false">
                      <template #radio="{ checked }">
                        <div
                          style="display: flex"
                          :class="{ 'custom-radio-card-checked': checked }"
                        >
                          <div className="custom-radio-card-mask">
                            <div className="custom-radio-card-mask-dot"></div> </div
                          ><div className="custom-radio-card-title">关闭</div>
                        </div>
                      </template>
                    </a-radio>
                  </a-radio-group>
                  <template #extra>
                    <div>开启后系统备份将会是一小时一次</div>
                  </template>
                </a-form-item>
                <a-form-item label="登录背景">
                  <a-radio-group class="radio-bcg" v-model="backStage.backgroundCustom">
                    <a-radio :value="true">
                      <template #radio="{ checked }">
                        <div
                          style="display: flex"
                          :class="{ 'custom-radio-card-checked': checked }"
                        >
                          <div className="custom-radio-card-mask">
                            <div className="custom-radio-card-mask-dot"></div> </div
                          ><div className="custom-radio-card-title">自定义背景</div>
                        </div>
                      </template>
                    </a-radio>
                    <a-radio :value="false">
                      <template #radio="{ checked }">
                        <div
                          style="display: flex"
                          :class="{ 'custom-radio-card-checked': checked }"
                        >
                          <div className="custom-radio-card-mask">
                            <div className="custom-radio-card-mask-dot"></div> </div
                          ><div className="custom-radio-card-title">默认背景</div>
                        </div>
                      </template>
                    </a-radio>
                  </a-radio-group>
                  <template #extra>
                    <div>自定义背景可以自定义上传系统后台登录页背景图</div>
                  </template>
                </a-form-item>
                <a-form-item label="上传背景" field="icp" v-if="backStage.backgroundCustom">
                  <a-upload
                    action="/app/file/upload"
                    :show-file-list="false"
                    @success="onSuccessBcg"
                    :image-preview="true"
                  >
                    <template #upload-button>
                      <div
                        class="arco-upload-list-picture custom-upload-avatar"
                        v-if="backStage.backgroundImage"
                      >
                        <img :src="backStage.backgroundImage" />
                        <div class="arco-upload-list-picture-mask">
                          <IconEdit />
                        </div>
                      </div>
                      <div class="arco-upload-picture-card" v-else>
                        <div class="arco-upload-picture-card-text">
                          <IconPlus />
                        </div>
                      </div>
                      <!-- </div> -->
                    </template>
                  </a-upload>
                  <template #extra>
                    <div>系统后台登录页背景图</div>
                  </template>
                </a-form-item>
                <a-form-item label="后台LOGO" field="publicSecurity">
                  <a-upload
                    action="/app/file/upload"
                    :show-file-list="false"
                    @success="onSuccessLogo"
                    :image-preview="true"
                  >
                    <template #upload-button>
                      <div
                        class="arco-upload-list-picture custom-upload-avatar"
                        v-if="backStage.logoImage"
                      >
                        <img :src="backStage.logoImage" />
                        <div class="arco-upload-list-picture-mask">
                          <IconEdit />
                        </div>
                      </div>
                      <div class="arco-upload-picture-card" v-else>
                        <div class="arco-upload-picture-card-text">
                          <IconPlus />
                        </div>
                      </div>
                      <!-- </div> -->
                    </template>
                  </a-upload>
                  <template #extra>
                    <div>系统后台的LOGO</div>
                  </template>
                </a-form-item>
                <a-form-item label="页面样式" field="publicSecurity">
                  <div class="imgList">
                    <div
                      class="img-item"
                      v-for="(item, index) in aavbnm.allimgData"
                      :class="{ active: item.bOn }"
                      :key="index"
                      @click="checkImg(index)"
                    >
                      <img :src="item.imgsrc" style="width: 118px; height: 71px" alt="" />
                    </div>
                  </div>
                  <template #extra>
                    <div>系统后台登录页的样式</div>
                  </template>
                </a-form-item>
                <a-form-item>
                  <a-button html-type="submit" v-permission="upSystemAdmin" type="primary" long
                    >保存设置</a-button
                  >
                </a-form-item>
              </a-form>
            </a-col>
          </a-row>
        </div>
      </a-tab-pane>
      <a-tab-pane title="充值前端" key="2">
        <div class="box">
          <a-row class="grid-demo" justify="center">
            <a-col :span="10">
              <a-form
                ref="clientRef"
                :model="clientForm"
                :labelCol="{ span: 8 }"
                @submit="submitClient"
              >
                <a-form-item
                  label="充值端名称"
                  field="name"
                  :rules="[{ required: true, message: '请输入充值端名称' }]"
                  :validate-trigger="['change']"
                  asterisk-position="end"
                >
                  <a-input v-model.trim="clientForm.name" placeholder="请输入充值端名称" />
                  <template #extra>
                    <div>充值端顶部的名称</div>
                  </template>
                </a-form-item>
                <a-form-item
                  label="充值端标题"
                  field="title"
                  :rules="[{ required: true, message: '请输入充值端名称' }]"
                  :validate-trigger="['change']"
                  asterisk-position="end"
                >
                  <a-input v-model.trim="clientForm.title" placeholder="请输入充值端名称" />
                  <template #extra>
                    <div>充值端页面内显示的标题</div>
                  </template>
                </a-form-item>

                <a-form-item
                  label="提示文字"
                  field="tips"
                  :rules="[{ required: true, message: '请输入提示文字' }]"
                  :validate-trigger="['change']"
                  asterisk-position="end"
                >
                  <a-input v-model.trim="clientForm.tips" placeholder="请输入充值端名称" />
                  <template #extra>
                    <div>卡号输入框内的提示文字</div>
                  </template>
                </a-form-item>
                <a-form-item
                  label="登陆卡号"
                  field="loginCards"
                  :rules="[{ required: true, message: '请选择登陆卡号' }]"
                  :validate-trigger="['change']"
                  asterisk-position="end"
                >
                  <a-checkbox-group class="radio-bcg" v-model="clientForm.loginCards">
                    <a-checkbox :value="0">显示卡号</a-checkbox>
                    <a-checkbox :value="1">完整卡号</a-checkbox>
                    <a-checkbox :value="2">上游卡号</a-checkbox>
                  </a-checkbox-group>
                  <template #extra>
                    <div>登录页的卡号，可以使用哪些卡号进行登录</div>
                  </template>
                </a-form-item>

                <a-form-item label="手机号登录" field="phoneLogin">
                  <a-radio-group class="radio-bcg" v-model="clientForm.phoneLogin">
                    <a-radio :value="true">
                      <template #radio="{ checked }">
                        <div
                          style="display: flex"
                          :class="{ 'custom-radio-card-checked': checked }"
                        >
                          <div className="custom-radio-card-mask">
                            <div className="custom-radio-card-mask-dot"></div> </div
                          ><div className="custom-radio-card-title">开启</div>
                        </div>
                      </template>
                    </a-radio>
                    <a-radio :value="false">
                      <template #radio="{ checked }">
                        <div
                          style="display: flex"
                          :class="{ 'custom-radio-card-checked': checked }"
                        >
                          <div className="custom-radio-card-mask">
                            <div className="custom-radio-card-mask-dot"></div> </div
                          ><div className="custom-radio-card-title">关闭</div>
                        </div>
                      </template>
                    </a-radio>
                  </a-radio-group>
                  <template #extra>
                    <div>卡号输入框内，是否可以输入卡号直接登录</div>
                  </template>
                </a-form-item>
                <a-form-item label="登录公告" field="notice">
                  <a-input v-model.trim="clientForm.notice" placeholder="请输入登录公告" />
                  <template #extra>
                    <div>登录页显示的公告</div>
                  </template>
                </a-form-item>
                <a-form-item label="人工客服" field="customerServiceLink">
                  <a-input
                    v-model.trim="clientForm.customerServiceLink"
                    placeholder="请输入人工客服链接"
                  />
                  <template #extra>
                    <div>登录页显示的客服链接</div>
                  </template>
                </a-form-item>
                <a-form-item label="客服电话" field="phone">
                  <a-input v-model.trim="clientForm.phone" placeholder="请输入客服电话" />
                  <template #extra>
                    <div>客服电话</div>
                  </template>
                </a-form-item>
                <a-form-item label="登录背景">
                  <a-radio-group class="radio-bcg" v-model="clientForm.backgroundCustom">
                    <a-radio :value="true">
                      <template #radio="{ checked }">
                        <div
                          style="display: flex"
                          :class="{ 'custom-radio-card-checked': checked }"
                        >
                          <div className="custom-radio-card-mask">
                            <div className="custom-radio-card-mask-dot"></div> </div
                          ><div className="custom-radio-card-title">自定义背景</div>
                        </div>
                      </template>
                    </a-radio>
                    <a-radio :value="false">
                      <template #radio="{ checked }">
                        <div
                          style="display: flex"
                          :class="{ 'custom-radio-card-checked': checked }"
                        >
                          <div className="custom-radio-card-mask">
                            <div className="custom-radio-card-mask-dot"></div> </div
                          ><div className="custom-radio-card-title">默认背景</div>
                        </div>
                      </template>
                    </a-radio>
                  </a-radio-group>
                </a-form-item>
                <a-form-item label="上传背景" v-if="clientForm.backgroundCustom">
                  <a-upload
                    action="/app/file/upload"
                    :show-file-list="false"
                    @success="onClientBcg"
                    :image-preview="true"
                  >
                    <template #upload-button>
                      <div
                        class="arco-upload-list-picture custom-upload-avatar"
                        v-if="clientForm.backgroundImage"
                      >
                        <img :src="clientForm.backgroundImage" />
                        <div class="arco-upload-list-picture-mask">
                          <IconEdit />
                        </div>
                      </div>
                      <div class="arco-upload-picture-card" v-else>
                        <div class="arco-upload-picture-card-text">
                          <IconPlus />
                        </div>
                      </div>
                      <!-- </div> -->
                    </template>
                  </a-upload>
                  <template #extra>
                    <div>充值端登录页背景图</div>
                  </template>
                </a-form-item>
                <a-form-item label="自定义LOGO">
                  <a-upload
                    action="/app/file/upload"
                    :show-file-list="false"
                    @success="onClientLogo"
                    :image-preview="true"
                  >
                    <template #upload-button>
                      <div
                        class="arco-upload-list-picture custom-upload-avatar"
                        v-if="clientForm.logoImage"
                      >
                        <img :src="clientForm.logoImage" />
                        <div class="arco-upload-list-picture-mask">
                          <IconEdit />
                        </div>
                      </div>
                      <div class="arco-upload-picture-card" v-else>
                        <div class="arco-upload-picture-card-text">
                          <IconPlus />
                        </div>
                      </div>
                      <!-- </div> -->
                    </template>
                  </a-upload>
                  <template #extra>
                    <div>充值端的LOGO</div>
                  </template>
                </a-form-item>
                <a-form-item>
                  <a-button html-type="submit" v-permission="upClient" type="primary" long
                    >保存设置</a-button
                  >
                </a-form-item>
              </a-form>
            </a-col>
          </a-row>
        </div>
      </a-tab-pane>
      <a-tab-pane title="提现设置" key="3">
        <div class="box">
          <a-row class="grid-demo" justify="center">
            <a-col :span="10">
              <a-form
                ref="withdrawalRef"
                :model="withdrawalForm"
                :labelCol="{ span: 8 }"
                @submit="submitWithdrawal"
              >
                <a-form-item label="日期限制">
                  <a-input-group style="width: 100%">
                    <a-input-number
                      hide-button
                      v-model="withdrawalForm.addWithdrawalDate"
                      placeholder="请输入日期开始限制"
                    />
                    <a-input-number
                      hide-button
                      v-model="withdrawalForm.endWithdrawalDate"
                      placeholder="请输入日期结束限制"
                    />
                  </a-input-group>
                  <template #extra>
                    <div>限制客户在多少日至多少日之间可以提现</div>
                  </template>
                </a-form-item>
                <a-form-item label="时间限制">
                  <a-input-group style="width: 100%">
                    <a-input-number
                      hide-button
                      v-model="withdrawalForm.withdrawalDay"
                      placeholder="请输入时间限制"
                    />
                    <a-input-number
                      hide-button
                      v-model="withdrawalForm.withdrawalFrequency"
                      placeholder="请输入次数限制"
                    />
                  </a-input-group>
                  <template #extra>
                    <div>限制客户多少天内可提现多少次</div>
                  </template>
                </a-form-item>
                <a-form-item label="金额限制">
                  <a-input-group style="width: 100%">
                    <a-input-number
                      hide-button
                      :precision="2"
                      v-model="withdrawalForm.addAmount"
                      placeholder="请输入金额开始限制"
                    />
                    <a-input-number
                      hide-button
                      :precision="2"
                      v-model="withdrawalForm.endAmount"
                      placeholder="请输入金额结束限制"
                    />
                  </a-input-group>
                  <template #extra>
                    <div>限制客户提现金额在多少元至多少元之间</div>
                  </template>
                </a-form-item>
                <a-form-item label="整数限制" field="integerLimit" asterisk-position="end">
                  <a-select
                    placeholder="请选择整数限制"
                    v-model="withdrawalForm.integerLimit"
                    allow-clear
                  >
                    <a-option :value="0">整元</a-option>
                    <a-option :value="1">整十</a-option>
                    <a-option :value="2">整百</a-option>
                    <a-option :value="3">整千</a-option>
                    <a-option :value="4">整万</a-option>
                  </a-select>
                  <template #extra>
                    <div>限制客户提现金额必须为整数</div>
                  </template>
                </a-form-item>
                <a-form-item label="手续费模式" field="withdrawalServiceChargeMode">
                  <a-select
                    placeholder="请选择手续费模式"
                    v-model="withdrawalForm.withdrawalServiceChargeMode"
                    allow-clear
                  >
                    <a-option :value="0">单笔固定</a-option>
                    <a-option :value="1">单笔费率</a-option>
                    <a-option :value="2">固定+费率</a-option>
                  </a-select>
                  <template #extra>
                    <div>固定：提现多少元手续费都是固定的；费率：提现多少金额的百分比</div>
                  </template>
                </a-form-item>
                <a-form-item label="提现手续费" field="withdrawalServiceCharge">
                  <a-input-group style="width: 100%">
                    <a-input
                      v-model="withdrawalForm.withdrawalServiceChargeFixedAmount"
                      placeholder="提现固定金额"
                    />
                    <a-input
                      v-model="withdrawalForm.withdrawalServiceChargeRate"
                      placeholder="提现费率"
                    />
                  </a-input-group>
                  <template #extra>
                    <div>请根据自身需求填写，可以不填</div>
                  </template>
                </a-form-item>
                <a-form-item label="代扣税" field="withholdingTax">
                  <a-input-number
                    hide-button
                    :precision="2"
                    v-model="withdrawalForm.withholdingTax"
                    placeholder="请输入代扣税"
                  />
                  <template #extra>
                    <div>填写6，就是扣客户6%的税，客户提现100，就是扣除6元的税</div>
                  </template>
                </a-form-item>
                <a-form-item label="预留余额" field="reserveBalance">
                  <a-input-number
                    hide-button
                    :precision="2"
                    v-model="withdrawalForm.reserveBalance"
                    placeholder="请输入预留余额"
                  />
                  <template #extra>
                    <div>限制客户的余额必须在多少元以上</div>
                  </template>
                </a-form-item>
                <a-form-item label="单日限额" field="singleDayLimit">
                  <a-input-number
                    hide-button
                    :precision="2"
                    v-model="withdrawalForm.singleDayLimit"
                    placeholder="请输入单日限额"
                  />
                  <template #extra>
                    <div>限制一天内系统可以发起多少金额的提现</div>
                  </template>
                </a-form-item>
                <a-form-item
                  label="提现途径"
                  field="withdrawalRoutes"
                  :rules="[{ required: true, message: '请选择提现途径' }]"
                  :validate-trigger="['change']"
                  asterisk-position="end"
                >
                  <a-checkbox-group class="radio-bcg" v-model="withdrawalForm.withdrawalRoutes">
                    <a-checkbox :value="1">微信</a-checkbox>
                    <a-checkbox :value="0">支付宝</a-checkbox>
                    <a-checkbox :value="2">银行卡</a-checkbox>
                  </a-checkbox-group>
                  <template #extra>
                    <div>客户可以发起的提现途径，选择哪些，客户申请时，就可以用哪些提现途径</div>
                  </template>
                </a-form-item>
                <a-form-item label="提现一致" field="withdrawalConsistency">
                  <a-radio-group class="radio-bcg" v-model="withdrawalForm.withdrawalConsistency">
                    <a-radio :value="true">
                      <template #radio="{ checked }">
                        <div
                          style="display: flex"
                          :class="{ 'custom-radio-card-checked': checked }"
                        >
                          <div className="custom-radio-card-mask">
                            <div className="custom-radio-card-mask-dot"></div> </div
                          ><div className="custom-radio-card-title">开启</div>
                        </div>
                      </template>
                    </a-radio>
                    <a-radio :value="false">
                      <template #radio="{ checked }">
                        <div
                          style="display: flex"
                          :class="{ 'custom-radio-card-checked': checked }"
                        >
                          <div className="custom-radio-card-mask">
                            <div className="custom-radio-card-mask-dot"></div> </div
                          ><div className="custom-radio-card-title">关闭</div>
                        </div>
                      </template>
                    </a-radio>
                  </a-radio-group>
                  <template #extra>
                    <div>开启：客户的提现信息必须和实名信息保持一致，建议开启此功能</div>
                  </template>
                </a-form-item>
                <a-form-item label="提现验证" field="withdrawalVerification">
                  <a-radio-group class="radio-bcg" v-model="withdrawalForm.withdrawalVerification">
                    <a-radio :value="true">
                      <template #radio="{ checked }">
                        <div
                          style="display: flex"
                          :class="{ 'custom-radio-card-checked': checked }"
                        >
                          <div className="custom-radio-card-mask">
                            <div className="custom-radio-card-mask-dot"></div> </div
                          ><div className="custom-radio-card-title">开启</div>
                        </div>
                      </template>
                    </a-radio>
                    <a-radio :value="false">
                      <template #radio="{ checked }">
                        <div
                          style="display: flex"
                          :class="{ 'custom-radio-card-checked': checked }"
                        >
                          <div className="custom-radio-card-mask">
                            <div className="custom-radio-card-mask-dot"></div> </div
                          ><div className="custom-radio-card-title">关闭</div>
                        </div>
                      </template>
                    </a-radio>
                  </a-radio-group>
                  <template #extra>
                    <div>开启：客户每次发起提现都需要手机号验证</div>
                  </template>
                </a-form-item>
                <a-form-item label="激活限制" field="activationDay">
                  <a-input-group style="width: 100%">
                    <a-input v-model="withdrawalForm.activationDay" placeholder="请输入天数" />
                    <a-input v-model="withdrawalForm.activationNumber" placeholder="激活大于数量" />
                  </a-input-group>
                  <template #extra>
                    <div>限制客户多少天内的激活需要大于多少数量才可以发起提现</div>
                  </template>
                </a-form-item>
                <a-form-item>
                  <a-button html-type="submit" type="primary" v-permission="upWithdrawal" long
                    >保存设置</a-button
                  >
                </a-form-item>
              </a-form>
            </a-col>
          </a-row>
        </div>
      </a-tab-pane>
      <a-tab-pane title="实名设置" key="6">
        <div class="box">
          <a-row class="grid-demo" justify="center">
            <a-col :span="10">
              <a-form
                ref="realNameForms"
                :model="realNameForm"
                :labelCol="{ span: 8 }"
                @submit="setRealNameFn"
              >
                <a-divider dashed>账号实名</a-divider>
                <a-form-item label="实名弹出" field="realNamePopUp">
                  <a-radio-group class="radio-bcg" v-model="realNameForm.userAlert">
                    <a-radio :value="true">
                      <template #radio="{ checked }">
                        <div
                          style="display: flex"
                          :class="{ 'custom-radio-card-checked': checked }"
                        >
                          <div className="custom-radio-card-mask">
                            <div className="custom-radio-card-mask-dot"></div> </div
                          ><div className="custom-radio-card-title">开启</div>
                        </div>
                      </template>
                    </a-radio>
                    <a-radio :value="false">
                      <template #radio="{ checked }">
                        <div
                          style="display: flex"
                          :class="{ 'custom-radio-card-checked': checked }"
                        >
                          <div className="custom-radio-card-mask">
                            <div className="custom-radio-card-mask-dot"></div> </div
                          ><div className="custom-radio-card-title">关闭</div>
                        </div>
                      </template>
                    </a-radio>
                  </a-radio-group>
                  <template #extra>
                    <div>代理登录后，强制弹出实名页面，代理不实名无法进行其他操作</div>
                  </template>
                </a-form-item>
                <a-form-item
                  label="免费实名"
                  :rules="[{ required: true, message: '请输入免费实名次数' }]"
                  :validate-trigger="['change']"
                  asterisk-position="end"
                  field="userFreeTimes"
                >
                  <a-input-number
                    hide-button
                    v-model="realNameForm.userFreeTimes"
                    placeholder="请输入免费实名次数"
                  />
                  <template #extra>
                    <div>客户实名的免费实名次数</div>
                  </template>
                </a-form-item>
                <a-form-item
                  label="实名费用"
                  :rules="[{ required: true, message: '请输入实名费用' }]"
                  :validate-trigger="['change']"
                  asterisk-position="end"
                  field="userFees"
                >
                  <a-input-number
                    hide-button
                    v-model="realNameForm.userFees"
                    placeholder="请输入实名费用"
                  />
                  <template #extra>
                    <div>客户实名时的实名费用，当免费实名用完时，才需要付费</div>
                  </template>
                </a-form-item>
                <a-form-item label="证件正反" field="userIdCard">
                  <a-radio-group class="radio-bcg" v-model="realNameForm.userIdCard">
                    <a-radio :value="true">
                      <template #radio="{ checked }">
                        <div
                          style="display: flex"
                          :class="{ 'custom-radio-card-checked': checked }"
                        >
                          <div className="custom-radio-card-mask">
                            <div className="custom-radio-card-mask-dot"></div> </div
                          ><div className="custom-radio-card-title">开启</div>
                        </div>
                      </template>
                    </a-radio>
                    <a-radio :value="false">
                      <template #radio="{ checked }">
                        <div
                          style="display: flex"
                          :class="{ 'custom-radio-card-checked': checked }"
                        >
                          <div className="custom-radio-card-mask">
                            <div className="custom-radio-card-mask-dot"></div> </div
                          ><div className="custom-radio-card-title">关闭</div>
                        </div>
                      </template>
                    </a-radio>
                  </a-radio-group>
                  <template #extra>
                    <div>开启后客户需要上传身份证正反面</div>
                  </template>
                </a-form-item>
                <a-form-item label="手持证件" field="userHand">
                  <a-radio-group class="radio-bcg" v-model="realNameForm.userHand">
                    <a-radio :value="true">
                      <template #radio="{ checked }">
                        <div
                          style="display: flex"
                          :class="{ 'custom-radio-card-checked': checked }"
                        >
                          <div className="custom-radio-card-mask">
                            <div className="custom-radio-card-mask-dot"></div> </div
                          ><div className="custom-radio-card-title">开启</div>
                        </div>
                      </template>
                    </a-radio>
                    <a-radio :value="false">
                      <template #radio="{ checked }">
                        <div
                          style="display: flex"
                          :class="{ 'custom-radio-card-checked': checked }"
                        >
                          <div className="custom-radio-card-mask">
                            <div className="custom-radio-card-mask-dot"></div> </div
                          ><div className="custom-radio-card-title">关闭</div>
                        </div>
                      </template>
                    </a-radio>
                  </a-radio-group>
                  <template #extra>
                    <div>开启后客户需要上传手持证件照片</div>
                  </template>
                </a-form-item>
                <a-form-item label="实名验证" field="userVerification">
                  <a-radio-group class="radio-bcg" v-model="realNameForm.userVerification">
                    <a-radio :value="0">
                      <template #radio="{ checked }">
                        <div
                          style="display: flex"
                          :class="{ 'custom-radio-card-checked': checked }"
                        >
                          <div className="custom-radio-card-mask">
                            <div className="custom-radio-card-mask-dot"></div> </div
                          ><div className="custom-radio-card-title">短信</div>
                        </div>
                      </template>
                    </a-radio>
                    <a-radio :value="1">
                      <template #radio="{ checked }">
                        <div
                          style="display: flex"
                          :class="{ 'custom-radio-card-checked': checked }"
                        >
                          <div className="custom-radio-card-mask">
                            <div className="custom-radio-card-mask-dot"></div> </div
                          ><div className="custom-radio-card-title">国政通</div>
                        </div>
                      </template>
                    </a-radio>
                  </a-radio-group>
                  <template #extra>
                    <div>验证码：只需要手机号接验证码；国政通：需要验证姓名身份证手机号</div>
                  </template>
                </a-form-item>
                <a-form-item label="实名主体" required asterisk-position="end" field="userSubject">
                  <a-checkbox-group class="radio-bcg" v-model="realNameForm.userSubject">
                    <a-checkbox :value="0">个人实名</a-checkbox>
                    <a-checkbox :value="1">个体实名</a-checkbox>
                    <a-checkbox :value="2">企业实名</a-checkbox>
                  </a-checkbox-group>
                  <template #extra>
                    <div>选择哪个，客户就可以选择哪个的实名主体,至少选一个</div>
                  </template>
                </a-form-item>
                <a-form-item
                  label="实名提示"
                  :rules="[{ required: true, message: '请输入实名提示' }]"
                  :validate-trigger="['change']"
                  asterisk-position="end"
                  field="userTips"
                >
                  <a-input
                    hide-button
                    v-model="realNameForm.userTips"
                    placeholder="请输入实名提示"
                  />
                  <template #extra>
                    <div>请根据自身需求填写实名提示文字</div>
                  </template>
                </a-form-item>
                <a-divider dashed>卡号实名</a-divider>
                <a-form-item
                  label="免费实名"
                  :rules="[{ required: true, message: '请输入免费实名次数' }]"
                  :validate-trigger="['change']"
                  asterisk-position="end"
                  field="cardFreeTimes"
                >
                  <a-input-number
                    hide-button
                    v-model="realNameForm.cardFreeTimes"
                    placeholder="请输入免费实名次数"
                  />
                  <template #extra>
                    <div>卡号实名的免费实名次数</div>
                  </template>
                </a-form-item>
                <a-form-item
                  label="实名费用"
                  :rules="[{ required: true, message: '请输入实名费用' }]"
                  :validate-trigger="['change']"
                  asterisk-position="end"
                  field="cardFees"
                >
                  <a-input-number
                    hide-button
                    v-model="realNameForm.cardFees"
                    placeholder="请输入实名费用"
                  />
                  <template #extra>
                    <div>卡号实名时的实名费用，当免费实名用完时，才需要付费</div>
                  </template>
                </a-form-item>
                <a-form-item label="手机号限制" field="cardMobileNumberRestrictions">
                  <a-input-number
                    hide-button
                    v-model="realNameForm.cardMobileNumberRestrictions"
                    placeholder="请输入手机号限制数量"
                  />
                  <template #extra>
                    <div>手机号可以实名几张卡</div>
                  </template>
                </a-form-item>
                <a-form-item label="身份证限制" field="cardIdCardNumberRestrictions">
                  <a-input-number
                    hide-button
                    v-model="realNameForm.cardIdCardNumberRestrictions"
                    placeholder="请输入身份证限制"
                  />
                  <template #extra>
                    <div>身份证可以实名几张卡</div>
                  </template>
                </a-form-item>

                <a-form-item>
                  <a-button html-type="submit" v-permission="setRealName" type="primary" long
                    >保存设置</a-button
                  >
                </a-form-item>
              </a-form>
            </a-col>
          </a-row>
        </div>
      </a-tab-pane>
      <a-tab-pane title="邮箱设置" key="4">
        <div class="box">
          <a-row class="grid-demo" justify="center">
            <a-col :span="10">
              <a-form
                ref="emailRef"
                :model="emailForm"
                :labelCol="{ span: 8 }"
                @submit="upGetEamilFn"
              >
                <a-form-item label="SMTP服务器" field="host">
                  <a-input v-model="emailForm.host" placeholder="请输入SMTP服务器" />
                </a-form-item>
                <a-form-item label="SMTP端口" field="port">
                  <a-input-number v-model="emailForm.port" placeholder="请输入SMTP端口" />
                </a-form-item>
                <a-form-item label="SMTP用户名" field="userName">
                  <a-input v-model="emailForm.userName" placeholder="请输入SMTP用户名" />
                </a-form-item>
                <a-form-item label="SMTP密码" field="passWord">
                  <a-input v-model="emailForm.passWord" placeholder="请输入SMTP密码" />
                </a-form-item>
                <a-form-item>
                  <a-button html-type="submit" type="primary" v-permission="setEmailForm" long
                    >保存设置</a-button
                  >
                </a-form-item>
              </a-form>
            </a-col>
          </a-row>
        </div>
      </a-tab-pane>
      <a-tab-pane title="SSL证书设置" key="5">
        <div class="box">
          <a-row class="grid-demo" justify="center">
            <a-col :span="10">
              <a-form ref="sslRef" :model="sslForm" :labelCol="{ span: 8 }" @submit="submitSsl">
                <a-form-item label="证书类型" field="type">
                  <a-input v-model.trim="sslForm.type" disabled />
                </a-form-item>
                <a-form-item label="创建时间" v-if="sslForm.info" field="type">
                  <a-input v-model.trim="sslForm.info.createTime" disabled />
                </a-form-item>
                <a-form-item label="到期时间" v-if="sslForm.info" field="type">
                  <a-input v-model.trim="sslForm.info.expirationTime" disabled />
                </a-form-item>
                <a-form-item label="证书域名" v-if="sslForm.info" field="type">
                  <a-input
                    style="margin-bottom: 5px"
                    v-for="(item, index) in sslForm.info.hosts"
                    :key="item"
                    v-model.trim="sslForm.info.hosts[index]"
                    disabled
                  />
                </a-form-item>
                <a-form-item
                  label="证书密码"
                  field="passWord"
                  :rules="[{ required: true, message: '请输入证书密码' }]"
                  :validate-trigger="['change']"
                  asterisk-position="end"
                >
                  <a-input v-model.trim="sslForm.passWord" placeholder="请输入证书密码" />
                </a-form-item>
                <a-form-item label="上传文件" field="publicSecurity">
                  <a-upload
                    ref="sslU"
                    :auto-upload="false"
                    :data="{
                      type: sslForm.type,
                      passWord: sslForm.passWord,
                      enabled: sslForm.enabled,
                    }"
                    :limit="1"
                    :action="upSsl"
                    :before-upload="beforeUpload"
                    @success="onSsl"
                    @error="onError"
                  />
                </a-form-item>
                <a-form-item>
                  <a-button html-type="submit" v-permission="upSsl" type="primary" long
                    >保存设置</a-button
                  >
                </a-form-item>
                <a-form-item v-if="sslForm.enabled">
                  <a-button
                    @click="change"
                    :status="sslForm.enabled == 'true' ? 'danger' : 'success'"
                    type="primary"
                    long
                  >
                    {{ sslForm.enabled == 'true' ? '关闭SSL' : '开启SSL' }}
                  </a-button>
                </a-form-item>
              </a-form>
            </a-col>
          </a-row>
        </div>
      </a-tab-pane>
      <a-tab-pane title="真实IP设置" key="7">
        <div class="box">
          <a-row class="grid-demo" justify="center">
            <a-col :span="10">
              <a-form
                ref="ipFormrRef"
                :model="ipForm"
                :labelCol="{ span: 8 }"
                @submit="submitClientip"
              >
                <a-form-item label="头信息" field="name">
                  <a-input v-model.trim="ipForm.name" />
                </a-form-item>
                <a-form-item>
                  <a-button html-type="submit" v-permission="setclientip" type="primary" long
                    >保存设置</a-button
                  >
                </a-form-item>
              </a-form>
            </a-col>
          </a-row>
        </div>
      </a-tab-pane>
    </a-tabs>
  </div>
</template>

<script lang="ts" setup>
  import login1 from '@/assets/login1.png'
  import login2 from '@/assets/login2.png'
  import login3 from '@/assets/login3.png'
  import IconEdit from '@arco-design/web-vue/es/icon/icon-edit'
  import IconPlus from '@arco-design/web-vue/es/icon/icon-plus'
  import {
    systemAdmin,
    upSystemAdmin,
    client,
    upClient,
    withdrawal,
    upWithdrawal,
    getEmailForm,
    setEmailForm,
    ssl,
    upSsl,
    startSsl,
    closeSsl,
    getRealName,
    setRealName,
    clientip,
    setclientip,
  } from '@/api/url'
  import { post, get } from '@/api/http'
  import { onMounted, reactive, ref } from 'vue'
  import { Message, Modal } from '@arco-design/web-vue'
  const backup = ref(false)
  function changeFn(val: any) {
    if (val == 1) {
      systemAdminFn()
    } else if (val == 2) {
      clientFn()
    } else if (val == 3) {
      withdrawalFn()
    } else if (val == 6) {
      getRealNameFn()
    } else if (val == 4) {
      getEmailFn()
    } else if (val == 5) {
      sslFn()
    } else if (val == 7) {
      getClientip()
    }
  }

  const key = ref('1')

  const emailRef = ref()
  const aavbnm = reactive({
    allimgData: [
      {
        id: '001',

        bOn: false,
        imgsrc: login1,
      },
      {
        id: '002',

        bOn: false,
        imgsrc: login2,
      },
      {
        id: '003',

        bOn: false,
        imgsrc: login3,
      },
    ],
  })
  const checkImg = (index: any) => {
    aavbnm.allimgData.forEach((item, indexs) => {
      if (indexs !== index) {
        item.bOn = false
      }
    })
    backStage.value.pageStyle = index
    const temp = aavbnm.allimgData[index]
    temp.bOn = !aavbnm.allimgData[index].bOn
  }
  // 邮箱设置
  const emailForm: any = ref({
    host: '',
    port: '',
    userName: '',
    passWord: '',
  })

  //获取
  const getEmailFn = () => {
    get({ url: getEmailForm }).then((res) => {
      if (res.data) {
        emailForm.value = res.data
      }
    })
  }

  //保存
  const upGetEamilFn = () => {
    emailRef.value.validate((error: any) => {
      if (!error) {
        post({ url: setEmailForm, data: { ...emailForm.value } }).then((res) => {
          if (res.code == 0) {
            Message.success(res.msg)
            getEmailFn()
          }
        })
      }
    })
  }
  // 实名设置
  const realNameForm: any = ref({
    userAlert: false,
    /**
     * 用户免费实名次数
     */
    userFreeTimes: '',

    /**
     * 用户实名费用
     */
    userFees: '',

    /**
     * 用户实名验证 0短信 1国政通
     */
    userVerification: 0,

    /**
     * 实名主体  0个人 1个体 2企业
     */
    userSubject: [],

    /**
     * 用户实名手持
     */
    userHand: false,

    /**
     * 用户实名身份证正反
     */
    userIdCard: false,

    /**
     * 用户实名提示
     */
    userTips: '',

    /**
     * 手机号限制
     */
    cardMobileNumberRestrictions: '',

    /**
     * 身份证号限制
     */
    cardIdCardNumberRestrictions: '',

    /**
     * 卡号免费实名次数
     */
    cardFreeTimes: '',

    /**
     * 卡号实名费用
     */
    cardFees: '',
  })

  //获取
  const getRealNameFn = () => {
    get({ url: getRealName }).then((res) => {
      if (res.data) {
        realNameForm.value = res.data
      }
    })
  }
  const realNameForms = ref()
  //保存
  const setRealNameFn = () => {
    realNameForms.value.validate((error: any) => {
      if (!error) {
        post({ url: setRealName, data: { ...realNameForm.value } }).then((res) => {
          if (res.code == 0) {
            Message.success(res.msg)
            getRealNameFn()
          }
        })
      }
    })
  }
  //后台设置
  const backStageForm = ref()
  const backStage = ref({
    passWordError: '', //密码输入错误次数锁定账号
    icp: '', //备案号
    publicSecurity: '', //公安备案号
    name: '', //系统名称
    backgroundCustom: false, //true开启自定义背景图片 false不开启
    backgroundImage: '', //背景图片地址
    logoImage: '', //logo地址
    pageStyle: '',
    email: '',
    phone: '',
    balance: '',
  })
  //获取
  const systemAdminFn = () => {
    get({
      url: systemAdmin,
    }).then((res) => {
      if (res.data) {
        if (res.data.name) {
          document.title = res.data.name
        }
        aavbnm.allimgData[res.data.pageStyle].bOn = true
        backStage.value = res.data
      }
    })
  }
  //保存
  const upSystemAdmins = () => {
    post({
      url: upSystemAdmin,
      data: {
        ...backStage.value,
      },
    }).then((res) => {
      if (res.code == 0) {
        Message.success(res.msg)
        systemAdminFn()
      }
    })
  }
  //确认
  const submit = async () => {
    backStageForm.value.validate((error: any) => {
      if (!error) {
        upSystemAdmins()
      }
    })
  }
  //背景图上传
  const onSuccessBcg = (fileItem: any) => {
    backStage.value.backgroundImage = fileItem.response.data.path
  }
  //Logo上传
  const onSuccessLogo = (fileItem: any) => {
    backStage.value.logoImage = fileItem.response.data.path
  }
  //前端设置
  const clientRef = ref()
  const clientForm = ref({
    name: '', //系统名称
    title: '', //标题
    tips: '',
    notice: '', //公告
    customerServiceLink: '',
    backgroundCustom: false, //true开启自定义背景图片 false不开启
    backgroundImage: '', //背景图片地址
    logoImage: '', //logo地址
    loginCards: [], //卡号登录 0显示卡号(我方卡号) 1完整卡号(ICCID) 2接口卡号(上游卡号)
    phoneLogin: true, //手机号登录
    phone: '',
  })
  // 获取
  const clientFn = () => {
    get({
      url: client,
    }).then((res) => {
      if (res.data) {
        clientForm.value = res.data
      }
    })
  }
  //保存
  const upClients = () => {
    post({
      url: upClient,
      data: {
        ...clientForm.value,
      },
    }).then((res) => {
      if (res.code == 0) {
        Message.success(res.msg)
        clientFn()
      }
    })
  }

  //确认
  const submitClient = async () => {
    clientRef.value.validate((error: any) => {
      if (!error) {
        upClients()
      }
    })
  }

  //背景图上传
  const onClientBcg = (fileItem: any) => {
    clientForm.value.backgroundImage = fileItem.response.data.path
  }
  //Logo上传
  const onClientLogo = (fileItem: any) => {
    clientForm.value.logoImage = fileItem.response.data.path
  }

  //提现设置
  const withdrawalRef = ref()
  const withdrawalForm = ref({
    addWithdrawalDate: '', //每个月X号 ~ X号内可提现 和endWithdrawalDate关联 为null不限制
    endWithdrawalDate: '', //每个月X号 ~ X号内可提现 和addWithdrawalDate关联 为null不限制
    withdrawalDay: '', //X天限制提现X次 和withdrawalFrequency关联 为null不限制
    withdrawalFrequency: '', //X天限制提现X次 和withdrawalDay关联 为null不限制
    addAmount: '', //提现金额限制X ~ X元 和endBalance关联 为null不限制
    endAmount: '', //提现金额限制X ~ X元 和addBalance关联 为null不限制
    integerLimit: '', //整数限制 0整元 1整十 2整百 3整千 4整万 为null不限制
    withdrawalRoutes: [], //提现途径 0支付宝 1微信 2银行卡 为null不限制
    withdrawalServiceChargeMode: '', //提现手续费模式 0单笔固定 1单笔费率 2单笔固定和单笔费率 为null不要手续费
    withdrawalServiceChargeFixedAmount: '', //提现固定金额 withdrawalServiceChargeMode不为null并且为0或2时该字段必填
    withdrawalServiceChargeRate: '', //提现费率 withdrawalServiceChargeMode 不为null并且为1或2时该字段必填
    withholdingTax: '', //提现代扣税 为null不需要代扣税
    payServiceCharge: '', //充值手续费 为null不需要手续费
    reserveBalance: '', //预留金额 为null不进行限制
    singleDayLimit: '', //单日限额 为null不进行限制
    realName: false,
    withdrawalConsistency: false,
    withdrawalVerification: false,
    activationDay: '', // X天激活X张可提现 和activationNumber关联
    activationNumber: '', // X天激活X张可提现 和activationDay关联
  })

  // 获取
  const withdrawalFn = () => {
    get({
      url: withdrawal,
    }).then((res) => {
      if (res.data) {
        withdrawalForm.value = res.data
      }
    })
  }
  //保存
  const upWithdrawals = () => {
    post({
      url: upWithdrawal,
      data: {
        ...withdrawalForm.value,
      },
    }).then((res) => {
      if (res.code == 0) {
        Message.success(res.msg)
        withdrawalFn()
      }
    })
  }

  //确认
  const submitWithdrawal = async () => {
    withdrawalRef.value.validate((error: any) => {
      if (!error) {
        upWithdrawals()
      }
    })
  }
  //提现设置
  const sslU = ref()
  const sslRef = ref()
  const sslForm = ref({
    type: '', //证书类型
    passWord: '', //证书密码
    enabled: '', //是否启用
    info: {
      createTime: '',
      expirationTime: '',
      hosts: [],
    },
  })
  //上传文件前校验
  const beforeUpload = (file: any) => {
    if (file.type != 'application/x-pkcs12') {
      Message.error('文件格式错误')
    }
  }

  //Logo上传
  const onSsl = () => {
    Message.success('上传成功')
    sslFn()
  }

  //Logo上传
  const onError = (fileItem: any) => {
    Message.error(fileItem.response.msg)
  }

  // 获取
  const sslFn = () => {
    get({
      url: ssl,
    }).then((res) => {
      if (res.data) {
        sslForm.value = res.data
        sslForm.value.type = 'PKCS12'
      }
      // console.log(res.data.info.hosts[0])
    })
  }
  // 获取
  const closeSsls = () => {
    get({
      url: closeSsl,
    }).then((res) => {
      sslForm.value = res.data
      sslFn()
    })
  }

  const change = () => {
    Modal.warning({
      title: '操作提示',
      titleAlign: 'start',
      content: '确定要执行此操作？',
      hideCancel: false,
      onOk() {
        if (sslForm.value.enabled == 'true') {
          closeSsls()
        } else {
          startSsls()
        }
      },
    })
  }

  const ipForm: any = ref({
    name: '',
  })

  const ipFormrRef = ref()
  // 获取
  const getClientip = () => {
    get({
      url: clientip,
    }).then((res) => {
      if (res.data) {
        ipForm.value.name = res.data
      }
    })
  }

  //确认
  const submitClientip = async () => {
    ipFormrRef.value.validate((error: any) => {
      if (!error) {
        get({
          url: setclientip,
          data: {
            ...ipForm.value,
          },
        }).then((res) => {
          Message.success(res.msg)
        })
      }
    })
  }

  // 开启
  const startSsls = () => {
    get({
      url: startSsl,
    }).then((res) => {
      Message.success(res.msg)
      sslFn()
    })
  }

  //确认
  const submitSsl = async () => {
    sslRef.value.validate((error: any) => {
      if (!error) {
        sslU.value.submit()
      }
    })
  }

  function changeBackup(val: any) {
    get({
      url: '/app/configuration/backup/set',
      data: {
        backup: val,
      },
    }).then((res) => {
      if (res.status) {
        getBackup()
      }
    })
  }

  //获取快速备份
  const getBackup = () => {
    get({ url: '/app/configuration/backup/get' }).then((res) => {
      if (res.data) {
        if (res.data == 'false') {
          backup.value = false
        } else {
          backup.value = true
        }
      } else {
        backup.value = false
      }
    })
  }

  onMounted(async () => {
    await getBackup()
    await systemAdminFn()
  })

  function logToConsole(arg0: string, value: any) {
    throw new Error('Function not implemented.')
  }
</script>

<style lang="less" scoped>
  :deep(.arco-form-item-extra) {
    margin-top: 4px !important;
    margin-bottom: 0px !important;
  }
  :deep(.arco-table-cell-expand-icon) {
    justify-content: center;
  }
  :deep(.arco-form-item.arco-form-item-error) {
    margin-bottom: 20px !important;
  }
  :deep(.arco-tabs-nav-tab) {
    background-color: var(--color-bg-1);
    padding: 20px 0;
    border-radius: 10px;
  }

  :deep(.arco-tabs-content::before) {
    height: 0px !important;
  }

  :deep(.arco-tabs-tab) {
    margin: 0 20px;
    padding: 0;
    padding-bottom: 5px;
  }

  :deep(.arco-tabs-nav::before) {
    position: static !important;
    height: 0px !important;
  }

  :deep(.arco-tabs-content) {
    padding-top: 20px;
  }

  .box {
    padding: 20px;
    border-radius: 10px;
    background-color: var(--color-bg-2);
  }

  .tabs {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 40px;
    margin-bottom: 20px;

    .button {
      box-sizing: border-box;
      padding-bottom: 5px;
    }
  }

  .action {
    color: #009dff;
    border-bottom: 3px solid #009dff;
  }

  .butten {
    padding: 0px 4px;
  }
  .imgList {
    width: 98%;
    background-color: #fff;
    display: flex;
    flex-wrap: wrap;
    .active {
      display: block;
      width: 118px;
      height: 71px;
      line-height: 0;
      font-size: 0;
      vertical-align: middle;
      border: 3px solid #2b89fd;
      -webkit-transform: rotate(0deg);
    }
    .active::before {
      content: '';
      position: absolute;
      right: 0;
      bottom: 0;
      border: 12px solid #2b89fd;
      border-top-color: transparent;
      border-left-color: transparent;
    }
    .active::after {
      content: '';
      display: block;
      width: 5px;
      height: 10px;
      position: absolute;
      right: 4px;
      bottom: 5px;
      border: 1px solid #fff;
      border-top-color: transparent;
      border-left-color: transparent;
      transform: rotate(45deg);
      cursor: pointer;
    }
    .img-item {
      width: 118px;
      height: 71px;
      overflow: hidden;
      background-color: #ffffff;
      margin: 10px 10px 10px 0px;
      cursor: pointer;
      img {
        height: 716px;
      }
    }
  }
  :deep(.arco-form-item-label) {
    width: 85px;
    text-align: left;
    height: 18px;
  }
</style>
